<template>
    <div>
        <div class="maincont" v-for="(item,index) in dataBase" :key="index">
            <div class="lefc">
                <div style="width: 100%; height: 100%;">
                    <img src="@/assets/22.jpg" style="width: 100%; height: 100%;" v-if="item.frontImage == null || item.frontImage == ''">
                    <img v-else :src="item.frontImage" style="width: 100%; height: 100%;">
                </div>              
            </div>

            <div class="righc">
                <div class="ritop" style="border-bottom: 1px solid black;">
                    <h2 v-if="item.title == '' && item.title == null">三体声音科技中国民乐系列 + 金属吉他 + 效果器双十一促销来来来！</h2>
                    <h2 v-else>{{ item.title }}</h2>
                </div>
                <div class="midmain">
                    <span v-if="item.descr == '' || item.descr == null">
                        Melodyne 5 Assistant：原价1737元，
                        如果通过这次促销升级的方式购买，则是718元，节省1019元。
                        如果你已经拥有了Essential版本，则只需要359元即可升级。
                    </span>
                    <span v-else>
                        {{ item.descr }}
                    </span>
                </div>
                <div class="userinfo"> 
                    <div class="avatar">
                        <img v-if="item.user" :src="item.user.image" style="height: 100%; width: 100%;border-radius: 50%;">
                        <img v-else src="@/assets/5.jpg" style="height: 100%; width: 100%;border-radius: 50%;">
                    </div>
                    <div class="username">
                        <span v-if="item.user">{{item.user.username}}</span>
                    </div>
                    <div class="time">
                        <span class="el-icon-date">{{item.updateTime}} </span>
                    </div>
                    <div class="detial" @click="checkdetial(item)">
                        <span>查看详情</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        dataBase:Array
    },
    methods:{
        checkdetial(val){
            console.log(val)
            this.$emit("checkdetial",val)
        }
    },
}
</script>

<style lang="less" scoped>
.maincont{
    background-color: #eee;
    padding: 10px;
    display: flex;
    margin-bottom: 20px;
    height: 300px;
    border: 1px solid black;
    .lefc{
        width: 300px;
        height: 100%;
        margin-right: 20px;
        overflow: hidden;
        img:hover{
            transition: all 0.3s;
            transform: scale(1.4);
        }
    }
    .righc{
        width: calc(100% - 300px);
        height: 100%;
    }
    .righc .midmain{
        padding: 20px;
        height: 80px;
        background-color: transparent;
        box-sizing: border-box;
        overflow: hidden;
        span{
            word-break:normal; 
            width:auto; 
            display:block; 
            white-space:pre-wrap;
            word-wrap : break-word ;
            overflow: hidden ;
        }
    }
    .righc .userinfo{
        height: 60px;
        display: flex;
        margin-top: 50px;
        justify-content: space-around;
        .avatar{
            height: 60px;
            width: 60px;
            border-radius: 50%;
        }
        .time{
            height: 60px;
            line-height: 60px;
            font-size: 20px;
        }
        .detial{
            height: 60px;
            line-height: 60px;
            color: #7CFC00;
            font-size: 20px;
        }
        .username{
            height: 60px;
            line-height: 60px;
            font-size: 20px;
        }
    }
}
</style>